<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户管理-new</title>
		<script src="../../js/dist_vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<link rel="stylesheet" type="text/css" href="../../css/customer.css" />
	</head>
	<body>
		<div id="app">
			<el-container>
				<el-header id="el-header">
					<el-row :gutter="20">
						<el-col :span="8">
							<div class="grid-content bg-purple">
								<span><i class="el-icon-s-home"></i></span>
								<span><a href="customer.html">首页</a></span>
								<span>&gt;</span>
								<span>用户管理</span>
							</div>
						</el-col>
					</el-row>
				</el-header>
				<el-main>
					<el-input placeholder="请输入关键字" v-model="keyword"></el-input>
					<el-button type="primary" icon="el-icon-search" class="search" @click="load(1)">搜索</el-button>
					<el-button type="primary" icon="el-icon-plus" @click="addFormVisible = true">添加</el-button>
					<el-button type="danger" icon="el-icon-delete" @click="del">批量删除</el-button>
					<table border="1px">
						<tr>
							<th>
								<input type="checkbox" @change="allSelect" :checked="isAllSelect">
							</th>
							<th>用户名</th>
							<th width="180">性别</th>
							<th width="280">住址</th>
							<th>联系方式</th>
							<th width="150">基本操作</th>
						</tr>
						<tr v-for="(item,index) in pageInfo.records">
							<td>
								<input type="checkbox" :value="item.id" :checked="isAllSelect" @change="ckSelect">
							</td>
							<td>{{item.username}}</td>
							<td>{{item.gender}}</td>
							<td>{{item.address}}</td>
							<td>{{item.phone}}</td>
							<td>
								<!-- 修改 -->
								<span @click="editFormVisible = true">
									<el-button type="primary" icon="el-icon-edit" circle @click="edit(item.id)">
									</el-button>
								</span>
								<!-- 删除 -->
								<span>
									<el-button type="danger" icon="el-icon-delete" circle @click="del(item.id)">
									</el-button>
								</span>
							</td>
						</tr>
					</table>
					<nav aria-label="Page navigation" style="float: right;" v-if="pageInfo.pages > 1">
						<ul class="pagination">
							<li>
								<a href="#" aria-label="Previous" @click="load(pageInfo.pageIndex-1)">
									<span aria-hidden="true">&laquo;</span>
								</a>
							</li>
							<li :class="pageInfo.pageIndex==(index+1)?'active':''"
								v-for="(item,index) in pageInfo.pages">
								<a href="#" @click="load(index+1)">{{index+1}}</a>
							</li>
							<li>
								<a href="#" aria-label="Next" @click="load(pageInfo.pageIndex+1)">
									<span aria-hidden="true">&raquo;</span>
								</a>
							</li>
						</ul>
					</nav>
				</el-main>
			</el-container>

			<el-dialog id="el-dialog" title="添加用户" :visible.sync="addFormVisible">
				<el-form :model="adduser" class="addform">
					<el-form-item label="用户名" :label-width="formLabelWidth">
						<el-input v-model="adduser.username" autocomplete="off" name="username" placeholder="请输入用户名">
						</el-input>
					</el-form-item>
					<el-form-item label="密码" :label-width="formLabelWidth">
						<el-input v-model="adduser.userpwd" autocomplete="off" name="userpwd" show-password
							placeholder="请输入密码">
						</el-input>
					</el-form-item>
					<el-form-item label="确认密码" :label-width="formLabelWidth">
						<el-input v-model="adduser.conuserpwd" autocomplete="off" name="conuserpwd" show-password
							placeholder="请确认用户名">
						</el-input>
					</el-form-item>
					<el-form-item label="性别" :label-width="formLabelWidth">
						<el-radio v-model="adduser.gender" label="男" name="gender">男</el-radio>
						<el-radio v-model="adduser.gender" label="女" name="gender">女</el-radio>
					</el-form-item>
					<el-form-item label="住址" :label-width="formLabelWidth">
						<el-input v-model="adduser.address" autocomplete="off" name="address" placeholder="请输入地址">
						</el-input>
					</el-form-item>
					<el-form-item label="联系方式" :label-width="formLabelWidth">
						<el-input v-model="adduser.phone" autocomplete="off" name="phone" placeholder="请输入电话">
						</el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="addFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="addbt">确 定</el-button>
				</div>
			</el-dialog>

			<el-dialog title="修改用户" :visible.sync="editFormVisible">
				<el-form :model="edituser" class="editform">
					<el-form-item label="用户名" :label-width="formLabelWidth">
						<el-input v-model="edituser.username" autocomplete="off" name="username" readonly></el-input>
					</el-form-item>
					<el-form-item label="性别" :label-width="formLabelWidth">
						<el-radio v-model="edituser.gender" label="男" name="gender">男</el-radio>
						<el-radio v-model="edituser.gender" label="女" name="gender">女</el-radio>
					</el-form-item>
					<el-form-item label="住址" :label-width="formLabelWidth">
						<el-input v-model="edituser.address" autocomplete="off" name="address"></el-input>
					</el-form-item>
					<el-form-item label="联系方式" :label-width="formLabelWidth">
						<el-input v-model="edituser.phone" autocomplete="off" name="phone"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="editFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="editbt">确 定</el-button>
				</div>
			</el-dialog>
		</div>

		<script type="text/javascript">
			var header = document.getElementById('el-header');
			header.style["height"] = "40px";
			var header = document.getElementById('el-dialog');
			header.style["margin-top"] = "0vh";
			new Vue({
				el: '#app',
				data: {
					input: '',
					pageInfo: [],
					isAllSelect: false,
					keyword: '',
					checked: true,
					ids: this.ids,
					addFormVisible: false,
					editFormVisible: false,
					adduser: {
						username: '',
						userpwd: '',
						conuserpwd: '',
						gender: '男',
						address: '',
						phone: '',
					},
					edituser: {
						username: '',
						userpwd: '',
						conuserpwd: '',
						gender: '男',
						address: '',
						phone: '',
					},
					formLabelWidth: '80px'
				},
				mounted() {
					// 加载云端数据
					this.load(1)
				},
				methods: {
					// 加载数据
					load(pageIndex) {
						// 判断无效页码
						if (pageIndex < 1 || pageIndex > this.pageInfo.pages) return;
						// 重置数据
						this.pageInfo = []
						this.isAllSelect = false
						// 设置一页显示10条记录
						let pageSize = 5
						// 加载云端数据
						let myurl = 'http://localhost:8080/user/getpagelist/' + pageIndex + "/" + pageSize
						if (this.keyword.trim() != '')
							myurl = myurl + '/' + this.keyword
						axios({
								method: 'get',
								url: myurl,
								headers: {
									'access_eastos': localStorage.getItem('access_eastos')
								}
							})
							.then(res => {
								this.pageInfo = res.data.data
								console.log(this.pageInfo)
							})
					},
					ckSelect(e) {
						let id = e.target._value
						if (e.target.checked) { //选中，把对应的id添加到ids数组
							this.ids.push(id)
						} else { // 未选中，查找ids有没有对应的id，如果有删除掉
							let delindex = this.ids.indexOf(id)
							if (delindex > -1) {
								this.ids.splice(delindex, 1)
							}
						}
						console.log(this.ids)
					},
					allSelect(e) {
						this.ids = []
						// 设置全选状态
						this.isAllSelect = e.target.checked
						// 如果是选中状态,添加全部id到ids中
						if (this.isAllSelect) {
							//添加全部id到ids中
							this.pageInfo.records.forEach(element => {
								this.ids.push(element.id)
							});
						}
						console.log(this.ids)
					},
					del(myid) {
						// 向删除ids数组中添加删除单个数据id
						if (myid != undefined && myid > 0) {
							this.ids = [] //删之前把上一个清掉
							this.ids.push(myid)
						}
						if (this.ids.length == 0) return

						// 云端删除数据
						axios({
								method: 'post',
								url: 'http://localhost:8080/user/del/',
								headers: {
									'access_eastos': localStorage.getItem('access_eastos')
								},
								data: {
									ids: this.ids
								}
							})
							.then(res => {
								if (res.data.statusCode == 200) {
									// 删除成功，重新加载一下数据
									this.load(this.pageInfo.pageIndex)
								}
							})
					},
					addbt() {
						let pattern = /^(?!^\d{6,16}$)(?!^[a-zA-Z]{6,16}$)^[0-9a-zA-Z]{6,16}$/
						if (this.adduser.username.trim() == '') {
							this.$message.error('请输入用户名！')
						} else if (this.adduser.userpwd.trim() == '') {
							this.$message.error('请输入密码！')
						} else if (this.adduser.conuserpwd.trim() == '') {
							this.$message.error('请确认密码！')
						} else if (this.adduser.userpwd.trim().length < 6 || this.adduser.userpwd.trim().length > 16) {
							this.$message.error('请输入密码（6-16位数字与字母的组合）')
						} else if (!pattern.exec(this.adduser.userpwd.trim())) {
							this.$message.error('请输入密码（6-16位数字与字母的组合）')
						} else if (this.adduser.userpwd != this.adduser.conuserpwd) {
							this.$message.error('两次输入的密码不一致，请重新输入')
						} else if (this.ckaddphone()) {
							axios({
									method: 'post',
									url: 'http://localhost:8080/user/add',
									data: {
										username: this.adduser.username,
										userpwd: this.adduser.userpwd,
										usertype: this.adduser.usertype,
										gender: this.adduser.gender,
										address: this.adduser.address,
										phone: this.adduser.phone
									}
								})
								.then(res => {
									console.log(res)
									if (res.data.statusCode == 200) { // 添加成功
										// 重置数据
										adduser = {
												username: '',
												userpwd: '',
												conuserpwd: '',
												gender: '男',
												address: '',
												phone: '',
											},
											this.$message({
												message: '添加成功，可以继续添加',
												type: 'success'
											}),
											this.addFormVisible= false,
											//更新数据
											this.load(this.pageInfo.pageIndex)
									} else {
										this.resultMessage = res.data.message
										this.$message.error(this.resultMessage)
									}
								})
						}
					},
					edit(myid) {
						axios({
								method: 'get',
								url: 'http://localhost:8080/user/findbyid/' + myid,
							})
							.then(res => {
								console.log(res)
								if (res.data.statusCode == 200)
									this.edituser = res.data.data
							})
					},
					editbt() {
						// 先去判断数据的有效性
						if (this.ckeditphone()) {
							// 发送异步请求
							axios({
									method: 'post',
									url: 'http://localhost:8080/user/update',
									data: {
										id: this.edituser.id,
										username: this.edituser.username,
										gender: this.edituser.gender,
										address: this.edituser.address,
										phone: this.edituser.phone
									}
								})
								.then(res => {
									console.log(res)
									if (res.data.statusCode == 200) { // 添加成功
										// 重新数据
										edituser = {
												username: '',
												conuserpwd: '',
												usertype: 1,
												gender: '男',
												address: '',
												phone: ''
											},
											this.$message({
												message: '修改成功',
												type: 'success'
											}),
											this.editFormVisible= false,
											//更新数据
											this.load(this.pageInfo.pageIndex)
									}
								})
						}
					},
					ckaddphone() {
						if (this.adduser.phone.trim() != '') {
							let pattern = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
							if (!pattern.exec(this.adduser.phone.trim())) {
								this.$message.error('请输入正确格式的手机号码')
								return false
							} else {
								return true
							}
						} else return true
					},
					ckeditphone() {
						if (this.edituser.phone.trim() != '') {
							let pattern = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
							if (!pattern.exec(this.edituser.phone.trim())) {
								this.$message.error('请输入正确格式的手机号码')
								return false
							} else {
								return true
							}
						} else return true
					}
				}
			})
		</script>
	</body>
</html>
